<template>
  <el-card>
    <SearchForm />
    <el-button type="primary" @click="openForm" style="margin-bottom: 20px"
      >新增执行</el-button
    >
    <el-table :data="tableData" row-key="name">
      <el-table-column prop="number" label="项目编号" fixed width="180" />
      <el-table-column prop="name" label="客户名称" fixed />
      <el-table-column prop="level" label="项目级别" />
      <el-table-column prop="industry" label="品牌所属行业" />
      <el-table-column prop="form" label="推广形式" />
      <el-table-column prop="executionTime" label="执行时间" />
      <el-table-column prop="nature" label="性质" />
      <el-table-column prop="billingPeriod" label="账期/天" />
      <el-table-column prop="department" label="需求来源部门" />
      <el-table-column prop="sell" label="销售负责人" />
      <el-table-column prop="executor" label="执行人" />
      <el-table-column prop="platform" label="发布平台" />
      <el-table-column prop="contractAmount" label="合同金额/元" />
      <el-table-column prop="executionCost" label="执行成本/元" />
      <el-table-column prop="rebate" label="返点" />
      <el-table-column prop="profitMargin" label="利润率" />
      <el-table-column prop="executionNumber" label="执行数量" />
      <el-table-column prop="progress" label="执行进展" />
      <el-table-column label="操作" fixed="right" width="150">
        <template #default="{ row }">
          <el-button type="text" @click="goDetail(row)">详情</el-button>
          <el-button type="text" @click="editRow(row)">编辑</el-button>
          <el-button type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ModalForm v-model="visible" :initValue="initValue" />
  </el-card>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import ModalForm from "./components/ModalForm.vue";
import SearchForm from "./components/SearchForm.vue";
const visible = ref(false);
const router = useRouter();
const openForm = () => {
  visible.value = true;
};
const initValue = ref<Execution | undefined>(undefined);
const tableData = ref<Execution[]>([
  {
    number: "ZESK20211212-ZX0046",
    name: "联想",
    level: "A",
    industry: "3c数码",
    form: "campaign",
    executionTime: "12月",
    nature: "垫款",
    billingPeriod: 90,
    department: "小红书事业部",
    sell: "张三",
    executor: "李四",

    contractAmount: 1000,
    executionCost: 16000,
    rebate: 12000,
    profitMargin: 20,
    executionNumber: 6,
    progress: "执行中",
  },
  {
    number: "ZESK20211212-ZX0046",
    name: "戴尔",
    level: "A",
    industry: "3c数码",
    form: "campaign",
    executionTime: "12月",
    nature: "垫款",
    billingPeriod: 90,
    department: "小红书事业部",
    sell: "张三",
    executor: "李四",

    contractAmount: 1000,
    executionCost: 16000,
    rebate: 12000,
    profitMargin: 20,
    executionNumber: 6,
    progress: "执行中",
  },
  {
    number: "ZESK20211212-ZX0046",
    name: "华为",
    level: "A",
    industry: "3c数码",
    form: "campaign",
    executionTime: "12月",
    nature: "垫款",
    billingPeriod: 90,
    department: "小红书事业部",
    sell: "张三",
    executor: "李四",

    contractAmount: 1000,
    executionCost: 16000,
    rebate: 12000,
    profitMargin: 20,
    executionNumber: 6,
    progress: "执行中",
  },
  {
    number: "ZESK20211212-ZX0046",
    name: "华硕",
    level: "A",
    industry: "3c数码",
    form: "campaign",
    executionTime: "12月",
    nature: "垫款",
    billingPeriod: 90,
    department: "小红书事业部",
    sell: "张三",
    executor: "李四",

    contractAmount: 1000,
    executionCost: 16000,
    rebate: 12000,
    profitMargin: 20,
    executionNumber: 6,
    progress: "执行中",
  },
  {
    number: "ZESK20211212-ZX0046",
    name: "惠普",
    level: "A",
    industry: "3c数码",
    form: "campaign",
    executionTime: "12月",
    nature: "垫款",
    billingPeriod: 90,
    department: "小红书事业部",
    sell: "张三",
    executor: "李四",

    contractAmount: 1000,
    executionCost: 16000,
    rebate: 12000,
    profitMargin: 20,
    executionNumber: 6,
    progress: "执行中",
  },
]);
function editRow(row: Execution) {
  initValue.value = { ...row };
  visible.value = true;
}
function goDetail(row: Execution) {
  router.push({ name: "executionDetail", params: { id: row.number } });
}
</script>
